{% extends "layout.html" %}
{% block title %}Edit Critter{% endblock %}
{% block scripts %}
{{super()}}
{% if g.user == critter.owner %}
<script type="text/javascript">
	SAVE_URL = "{{critter.get_url('save')|safe}}";
	COMPILE_URL = "{{critter.get_url('compile')|safe}}";
	REVERT_URL = "{{critter.get_url('revert')|safe}}";
	ERRORMARK_URL = "{{url_for('static', filename='images/errormark.png')}}";
</script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/lib/codemirror.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/comment/comment.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/comment/continuecomment.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/dialog/dialog.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/edit/closebrackets.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/edit/matchbrackets.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/fold/foldcode.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/fold/brace-fold.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/hint/show-hint.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/hint/anyword-hint.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/search/search.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/search/searchcursor.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/selection/active-line.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/addon/wrap/hardwrap.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/keymap/emacs.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/keymap/sublime.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/keymap/vim.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='codemirror/mode/clike/clike.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/editor.js')}}"></script>
{% endif %}
{% endblock %}

{% block stylesheets %}
{% if g.user == critter.owner %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='codemirror/lib/codemirror.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/editor-theme.css') }}">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='codemirror/addon/fold/foldgutter.css') }}">
{% endif %}
{{super()}}

{% endblock %}

{% block bodybox %}
{% if g.user == critter.owner %}
<div id="editorbox">
	<div id="toolbar">
		<h1>{{critter.name}}</h1>
		<div class="items">
			<div class="clear"></div>
			<span class="item left"><a href="{{url_for('home_app.home_page')|safe}}">Back</a></span>
			<span class="item left"><a id="savebutton">Save</a></span>
			<span class="item left"><a id="compilebutton">Compile</a></span>
			<span class="item left"><a id="revertbutton" title="Revert to last successful compile">Revert</a></span>
			<span class="item right"><a id="togglehelpboxbutton">Toggle Sidebar</a></span>
			<span class="item right"><a id="autosavebutton"> </a></span>
			<div class="clear"></div>
		</div>
	</div>
	<div id="middlebox">
		<textarea id="editor">{{critter.content}}</textarea>
		<div id="helpbox">
			<div id=tabbuttonbar>
				<a class="tabbutton">Overview</a>
				<a class="tabbutton">API</a>
				<a class="tabbutton">Keyboard Shortcuts</a>
				<div class="clear"></div>
			</div>
			<div id="helpboxcontent">
				<div class="tab">
					<h1>Overview</h1>
					<p>You are creating a class that will control a critter in battle. Each critter created in battle will be represented by an instance of your Critter class. Your job is to write the <code>getMove</code> method that decides what actions your critters will take. The basic implementation provided will not win any battles. You must improve upon the design by making a more intelligent creature.</p>
					<p>Your improvements could range from simple to more complex. For instance, you could check if there is an enemy critter in front of you, and if there is, infect it. A more complex behavior could involve searching for critters of the same type to form groups.</p>
					<p>Some hints:</p>
					<ul>
						<li>Static variables can be used to share information between critters.</li>
						<li>Single critters are more vulnerable than critters in groups.</li>
						<li>Diagonal movement tends to be effective.</li>
					</ul>
				</div>
				<div class="tab">
					<h1>Critter API</h1>
					<!-- <p>This pane is to give you some reminders about the Critter API.</p> -->
					<h2>Action</h2>
					<table>
						<tr>
							<td>HOP</td>
							<td>Move the critter forward one square</td>
						</tr>
						<tr>
							<td>INFECT</td>
							<td>Infect the critter in front of this critter</td>
						</tr>
						<tr>
							<td>RIGHT</td>
							<td>Turn clockwise</td>
						</tr>
						<tr>
							<td>LEFT</td>
							<td>Turn counter-clockwise</td>
						</tr>
					</table>
					<h2>CritterInfo</h2>
					<table>
						<tr>
							<td>getFront()</td>
							<td>Returns the <code>Neighbor</code> in front of this Critter.</td>
						</tr>
						<tr>
							<td>getBack()</td>
							<td>Returns the <code>Neighbor</code> behind this Critter.</td>
						</tr>
						<tr>
							<td>getLeft()</td>
							<td>Returns the <code>Neighbor</code> to the left of this Critter.</td>
						</tr>
						<tr>
							<td>getRight()</td>
							<td>Returns the <code>Neighbor</code> to the right of this Critter.</td>
						</tr>
						<tr>
							<td>getDirection()</td>
							<td>Returns the <code>Direction</code> this Critter is facing.</td>
						</tr>
						<tr>
							<td>getInfectCount()</td>
							<td>Returns the number of critters this critter has infected</td>
						</tr>
					</table>
					<h2>Neighbor</h2>
					<table>
						<tr>
							<td>WALL</td>
							<td>Walls at the edge of the map. Cannot be moved through.</td>
						</tr>
						<tr>
							<td>SAME</td>
							<td>Another critter of the same type.</td>
						</tr>
						<tr>
							<td>OTHER</td>
							<td>A critter of a different type.</td>
						</tr>
						<tr>
							<td>EMPTY</td>
							<td>An empty cell.</td>
						</tr>
					</table>
					<h2>Direction</h2>
					<table>
						<tr>
							<td>NORTH</td>
							<td>The absolute direction above the critter</td>
						</tr>
						<tr>
							<td>SOUTH</td>
							<td>The absolute direction below the critter</td>
						</tr>
						<tr>
							<td>EAST</td>
							<td>The absolute direction right of the critter</td>
						</tr>
						<tr>
							<td>WEST</td>
							<td>The absolute direction left of the critter</td>
						</tr>
					</table>
				</div>
				<div class="tab">
					<h1>Keyboard Shortcuts</h1>
					<!-- <p>The keyboard shortcuts are based on Sublime Text.</p> -->
					<h2>Files</h2>
					<table>
						<tr>
							<td>Ctrl+S</td>
							<td>Save Critter</td>
						</tr>
						<tr>
							<td>Ctrl+B</td>
							<td>Build Critter</td>
						</tr>
					</table>
					<h2>Navigation</h2>
					<table>
						<tr>
							<td>Ctrl-Left</td>
							<td>Go word Left</td>
						</tr>
						<tr>
							<td>Ctrl-Right</td>
							<td>Go word Right</td>
						</tr>
						<tr>
							<td>Alt-Left</td>
							<td>Go Subword Left</td>
						</tr>
						<tr>
							<td>Alt-Right</td>
							<td>Go Subword Right</td>
						</tr>
						<tr>
							<td>Ctrl-Up</td>
							<td>Scroll Line Up</td>
						</tr>
						<tr>
							<td>Ctrl-Down</td>
							<td>Scroll Line Down</td>
						</tr>
						<tr>
							<td>Ctrl-M</td>
							<td>Go To Bracket</td>
						</tr>
					</table>
					<h2>Editing</h2>
					<table>
						<tr>
							<td>Ctrl-D</td>
							<td>Duplicate Line</td>
						</tr>
						<tr>
							<td>Ctrl-Shift-D</td>
							<td>Delete Line</td>
						</tr>
						<tr>
							<td>Ctrl-Z</td>
							<td>Undo</td>
						</tr>
						<tr>
							<td>Ctrl-Shift-Z, Ctrl-Y</td>
							<td>Redo</td>
						<tr>
							<td>Ctrl-Enter</td>
							<td>Insert Line Below Cursor</td>
						</tr>
						</tr>
						<tr>
							<td>Ctrl-Shift-Enter</td>
							<td>Insert Line Above Cursor</td>
						</tr>
						<tr>
							<td>Ctrl-Shift-Up</td>
							<td>Swap Line Up</td>
						</tr>
						<tr>
							<td>Ctrl-Shift-Down</td>
							<td>Swap Line Down</td>
						</tr>
						<tr>
							<td>Ctrl-J</td>
							<td>Join Lines</td>
						</tr>
						<tr>
							<td>F9</td>
							<td>Sort Lines</td>
						</tr>
						<tr>
							<td>Ctrl-]</td>
							<td>Indent</td>
						</tr>
						<tr>
							<td>Ctrl-[</td>
							<td>Unindent</td>
						</tr>
						<tr>
							<td>Ctrl-Alt-F</td>
							<td>Reindent</td>
						</tr>
						<tr>
							<td>Ctrl-/</td>
							<td>Toggle Comment</td>
						</tr>
						<tr>
							<td>Ctrl-Shift-L</td>
							<td>Split Selection By Line</td>
						</tr>
					</table>
					<h2>Selection</h2>
					<table>
						<tr>
							<td>Ctrl-L</td>
							<td>Select Line</td>
						</tr>
						<tr>
							<td>Ctrl-E</td>
							<td>Select Next Occurence</td>
						</tr>
						<tr>
							<td>Ctrl-F</td>
							<td>Find</td>
						</tr>
						<tr>
							<td>Ctrl-H</td>
							<td>Replace</td>
						</tr>
						<tr>
							<td>Shift-Alt-Up</td>
							<td>Select Lines Upward</td>
						</tr>
						<tr>
							<td>Shift-Alt-Down</td>
							<td>Select Lines Downward</td>
						</tr>
						<tr>
							<td>Ctrl-Shift-M</td>
							<td>Select Between Brackets</td>
						</tr>
						<tr>
							<td>Ctrl-Space</td>
							<td>Select Scope</td>
						</tr>
						<tr>
							<td>Esc</td>
							<td>Exit Multi-selection</td>
						</tr>
					</table>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="statusbar">
		<li id="savestatus"></li>
		<li id="compilestatus"></li>
		<div id="errordisplay"></div>
	</div>
</div>

{% else %}
<h1>{{critter.name}}</h1>
<section>
	<p> Some stats about the critter </p>
</section>
{% endif %}
{% endblock bodybox%}